<template>
    <div class="navbar">
        <el-row>
        <el-col >
            <el-menu default-active="2" class="el-menu-vertical-demo"
                     @open="handleOpen"
                     @close="handleClose"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     router
            >
                <el-menu-item index="1" :route="{path:'/homePage'}">
                    <i class="el-icon-picture"></i>
                    <span>Welcome</span>
                </el-menu-item>
                <el-menu-item index="2" :route="{path:'/goods'}">
                    <i class="el-icon-menu"></i>
                    <span slot="title">商品管理</span>
                </el-menu-item>
                <el-menu-item index="3" :route="{path:'/order'}">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="4" :route="{path:'/evaluate'}">
                    <i class="el-icon-edit"></i>
                    <span slot="title">评价管理</span>
                </el-menu-item>
                <el-menu-item index="5" :route="{path:'/user'}">
                    <i class="el-icon-service"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="6" :route="{path:'/shop'}">
                    <i class="el-icon-setting"></i>
                    <span slot="title">店铺设置</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        </el-row>
    </div>
</template>

<script>
    import Vue  from "vue"
    import { Row, Col, Menu, Submenu, MenuItem, MenuItemGroup } from "element-ui"
    Vue.use(Row, Col, Menu, Submenu, MenuItem, MenuItemGroup)
    export default {
        name: "index",
        data() {
            return {}
        },
        components:{
            'el-row':Row,
            'el-col':Col,
            'el-menu':Menu,
            'el-menu-item':MenuItem,
            'el-menu-item-group':MenuItemGroup,
            'el-submenu':Submenu
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
.navbar{
    height: 100%;
    background: #545c64;
}
</style>
